<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机批发业务-商品备选区</title>
    <style type="text/css">
        table{
            width: 580px;
            height: 200px;
        }
        td{
            text-align: center;
            vertical-align: middle;
        }
        .myBtn{
            margin: 20px;
            width: 120px;
            height: 45px;
            border: 1px ridge #44FFEE;
        }
    </style>
    <script type="text/javascript">
        var result = '';
        var price = [2576.00,2999.00,3898.00,699.00,599.00,699.00];
        var product = ["iPhone 6 32GB 金色 移动联通电信4G",
        "OPPO R11 全网通 黑色版","Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机",
        "小米 红米手机4X 全网通版 2GB内存 16GB 香槟金","小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金",
        "小米 红米手机4X 全网通版 2GB内存 16GB 樱花粉"];
        var isSelected = [0,0,0,0,0,0];
        function clearALL() {
            isSelected = [0,0,0,0,0,0];
            myForm.sp0.checked = false;
            myForm.sp1.checked = false;
            myForm.sp2.checked = false;
            myForm.sp3.checked = false;
            myForm.sp4.checked = false;
            myForm.sp5.checked = false;
        }
        function checkOut() {
            var total = 0;
            var count = 0;
            for(var i = 0;i < isSelected.length;i++){
                count+=isSelected[i];
            }
            for (var i = 0; i < price.length; i++) {
                total = total+price[i]*isSelected[i];
            }
            alert("您所选购的"+count+"件，产品总价"+total+'\n'+'请去支付！');
        }
        function shoppingCart() {
            var selectList = '';
            for (var j = 0; j < product.length; j++) {
                if (isSelected[j]){
                    selectList += (j+1) + '-' + product[j] + '，价值=' + price[j] + '\n';
                }
            }
            var info = (selectList == "")?"您的购物车为空，请选购！":selectList;
            alert(info);
        }
        function checkSelect(number) {
            var temp;
            switch (number) {
                case 0:
                    temp = myForm.sp0.checked;
                    break;
                case 1:
                    temp = myForm.sp1.checked;
                    break;
                case 2:
                    temp = myForm.sp2.checked;
                    break;
                case 3:
                    temp = myForm.sp3.checked;
                    break;
                case 4:
                    temp = myForm.sp4.checked;
                    break;
                default:
                    temp = myForm.sp5.checked;
                    break;
            }
            isSelected[number] = (temp)?1:0
        }
    </script>
</head>
<body>
<form action="" name="myForm" method="post">
    <table align="center" border="1">
        <caption>手机批发业务-商品备选区</caption>
        <tr>
            <td>
                <img src="mobile_1.jpg" alt=""><br>
                <h4 name="h41">iPhone 6 32GB 金色 移动联通电信4G</h4>
                <input type="checkbox" name="sp0" value="2576" onclick="checkSelect(0)">￥2576.00 <br>
            </td>
            <td>
                <img src="moblie_2.jpg" alt=""><br>
                <h4 name="h42">OPPO R11 全网通 黑色版</h4>
                <input type="checkbox" name="sp1" value="2999" onclick="checkSelect(1)">￥2999.00 <br>
            </td>
            <td>
                <img src="moblie_3.jpg" alt=""><br>
                <h4 name="h43">Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机</h4>
                <input type="checkbox" name="sp2" value="3898" onclick="checkSelect(2)">￥3898.00 <br>
            </td>
        </tr>
        <tr>
            <td>
                <img src="moblie_4.jpg" alt=""><br>
                <h4 name="h44">小米 红米手机4X 全网通版 2GB内存 16GB 香槟金</h4>
                <input type="checkbox" name="sp3" value="699" onclick="checkSelect(3)">￥699.00 <br>
            </td>
            <td>
                <img src="moblie_5.jpg" alt=""><br>
                <h4 name="h45">小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金</h4>
                <input type="checkbox" name="sp4" value="599" onclick="checkSelect(4)">￥599.00 <br>
            </td>
            <td>
                <img src="moblie_6.jpg" alt=""><br>
                <h4 name="h46">小米 红米手机4X 全网通版 2GB内存 16GB 樱花粉</h4>
                <input type="checkbox" name="sp5" value="699" onclick="checkSelect(5)">￥699.00 <br>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="button" class="myBtn" value="查看购物车" onclick="shoppingCart();">
                <input type="button" class="myBtn" value="收银台结算" onclick="checkOut();">
                <input type="button" class="myBtn" value="初始化参数" onclick="clearALL();">
            </td>
        </tr>
    </table>
</form>
</body>
</html>